<template>
  <div>
    <el-popover
      placement="right"
      width="295"
      trigger="hover"
    >
      <template #reference>
        <div style="width: 30px;height: 25px;line-height: 25px;text-align: center;color: #fff;background: #409EFF;
border-radius: 80%;font-size: 12px;position: absolute" class="hover-proite"
             :style="{top:clientY + 'px',left:clientX + 'px'}">
          <i class="el-icon-plus"></i>
        </div>
      </template>

      <template #default>
        <div style="width: 100%;height: 100%">
          <div style="margin-bottom: 10px">
            <div class="label-text">逻辑处理</div>
            <el-row :gutter="20" style="margin-bottom: 10px">
              <el-col :span="12">
                <div class="box-show hover-proite">数据处理</div>
              </el-col>
              <el-col :span="12">
                <div class="box-show hover-proite" @click="addNodes('数据模型')">数据模型</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 10px">
              <el-col :span="12">
                <div class="box-show hover-proite">子流引用</div>
              </el-col>
              <el-col :span="12">
                <div class="box-show hover-proite">领域接口</div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="box-show hover-proite">工作流</div>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="label-text">流程控制</div>
            <el-row :gutter="20" style="margin-bottom: 10px">
              <el-col :span="12">
                <div class="box-show hover-proite" @click="addNodes('条件分支')">条件分支</div>
              </el-col>
              <el-col :span="12">
                <div class="box-show hover-proite">并行分支</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom: 10px">
              <el-col :span="12">
                <div class="box-show hover-proite">循环遍历</div>
              </el-col>
              <el-col :span="12">
                <div class="box-show hover-proite">终止流程</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "addComp",
  props:{
    clientX:{
      type:Number
    },
    clientY:{
      type:Number
    }
  },
  methods:{
    addNodes(nodeBranch){
      this.$emit('addNodeBranch',nodeBranch)
    }
  }
}
</script>

<style scoped lang="scss">
.label-text{
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
}
.box-show{
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d0cccc;
  border-radius: 5px;
  color: #000;
  font-weight: 500;

  &:hover{
    background: #1ab394;
    color: #fff;
  }
}
</style>
